<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('入库任务管理')"/>
    <link th:href="@{/assets/libs/layui/css/layui.css}" media="all" rel="stylesheet">
    <style>
        [v-cloak] {
            display: none;
        }
        .el-date-editor.el-input, .el-date-editor.el-input__inner {
            width: 200px!important;
        }
        .el-input__icon {
            line-height: 0!important;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li v-if="checkedSearch.indexOf('任务编号') != -1">
                            任务编号：<input type="text" name="taskNumber"/>
                        </li>
                        <li v-if="checkedSearch.indexOf('班次') != -1">
                            班次：
                            <select name="pid">
                                <option value="">全部</option>
                                <option v-for="(item, index) in jobTimes" :key="index" :value="item.pid" v-cloak>{{item.planName}}</option>
                            </select>
                        </li>
                        <li v-if="checkedSearch.indexOf('单据号') != -1">
                            单据号：<input type="text" name="billNo"/>
                        </li>
                        <li v-if="checkedSearch.indexOf('托盘号') != -1">
                            托盘号：<input type="text" name="boxCode"/>
                        </li>
                        <li v-if="checkedSearch.indexOf('批次') != -1" style="position: relative">
                            批次：
                            <input type="text" placeholder="请按格式输入：2021/01/01/1" class="inputInfo" v-model="searchBatch" @focus="focusFn()" @blur="searchBatchYZ()"/>
                            <ul id="ul_" v-show="showList" style="position: absolute;right: 0;width: 200px;height: 285px;z-index: 10;background-color: #fff;overflow: auto;border: 1px solid #dddddd;padding-left: 5px">
                                <li style="cursor: pointer;width: 100%" v-for="(item, index) in batchList" :key="index" @click="chooseBatch(item.batchName)">{{item.batchName}}</li>
                            </ul>
                            <input type="hidden" name="batch" v-model="searchBatch">
                        </li>
                        <li v-if="checkedSearch.indexOf('物料编码') != -1">
                            物料编码：<input type="text" name="itemCode"/>
                        </li>
                        <li v-if="checkedSearch.indexOf('物料名称') != -1">
                            物料名称：
                            <select name="itemId">
                                <option value="">全部</option>
                                <option v-for="(item, index) in items" :key="index" :value="item.itemId" v-cloak>{{item.itemName}}</option>
                            </select>
                        </li>
                        <li v-if="checkedSearch.indexOf('类型') != -1">
                            类型：
                            <select name="type">
                                <option value="">全部</option>
                                <option v-for="(item, index) in inTypes" :key="index" :value="item.dictValue" v-cloak>{{item.dictLabel}}</option>
                            </select>
                        </li>
                        <li v-if="checkedSearch.indexOf('状态') != -1">
                            状态：
                            <select name="state">
                                <option value="">全部</option>
                                <option value="0">已下发</option>
                                <option value="1">执行中</option>
                                <option value="2">报错</option>
                                <option value="3">已完成</option>
                                <option value="4">取货货物不存在</option>
                                <option value="5">作废</option>
                                <option value="6">强制完成</option>
                                <option value="7">需盘点</option>
                                <option value="8">在途</option>
                            </select>
                        </li>
                        <li v-if="checkedSearch.indexOf('操作人员') != -1">
                            操作人员：<input type="text" name="createUserName"/>
                        </li>
                        <li class="select-time" v-show="checkedSearch.indexOf('入库时间') != -1">
                            <label>入库时间：</label>
                            <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="startTime" v-model="startTimeValue"/>
                            <span>-</span>
                            <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="endTime"/>
                        </li>
                        <li v-show="checkedSearch.indexOf('码垛时间') != -1">
                            <label>码垛时间：</label>
                            <el-date-picker
                                id="areaStartTime"
                                name="areaStartTime"
                                v-model="areaStartTimeValue"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                type="datetime"
                                @change="compare"
                                placeholder="开始时间">
                            </el-date-picker>
                            <span>-</span>
                            <el-date-picker
                                id="areaEndTime"
                                name="areaEndTime"
                                v-model="areaEndTimeValue"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                type="datetime"
                                @change="compare"
                                placeholder="结束时间">
                            </el-date-picker>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" :class="flag ? 'disabled' : ''" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()" @click="searchBatchReset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            <a class="btn btn-success btn-rounded btn-sm" @click="moreSearch()"><i class="fa fa-edit"></i>&nbsp;更多</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <el-dialog title="搜索条件" width="200px" :visible.sync="showMore">
            <el-row>
                <el-col :span="24">
                    <el-checkbox style="margin-left: 28px" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                    <el-checkbox-group v-model="checkedSearch" @change="handleCheckedSearchChange">
                        <el-checkbox style="display: block;margin-left: 28px" v-for="item in searches" :label="item" :key="item" v-cloak>{{item}}</el-checkbox>
                    </el-checkbox-group>
                </el-col>
            </el-row>
        </el-dialog>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" data-mobile-responsive="true"></table>
        </div>
    </div>
    <el-dialog title="设备信息" width="60%" :visible.sync="dialogTableVisible">
        <el-row>
            <el-col :span="24">
                <el-table border size="small" height="300" :data="item.list">
                    <el-table-column property="taskNumber" label="任务编号"></el-table-column>
                    <el-table-column property="barCode" label="托盘条码"></el-table-column>
                    <el-table-column property="deviceName" label="设备名称"></el-table-column>
                    <el-table-column property="createTime" label="时间"></el-table-column>
                </el-table>
                <el-pagination
                    @current-change="chengCurrentPage"
                    :current-page="item.currentPage"
                    :page-size="item.pageSize"
                    layout="prev, pager, next"
                    :total="item.total">
                </el-pagination>
            </el-col>
        </el-row>
    </el-dialog>
</div>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    var prefix = ctx + "in/billlIntaskInfo";

    const searchOptions = ['任务编号', '班次', '单据号', '托盘号', '批次', '物料编码', '物料名称', '类型', '状态', '操作人员', '入库时间', '码垛时间'];

    var app = new Vue({
        el: '.container-div',
        data: {
            showMore: false,
            checkAll: false,
            checkedSearch: ['班次', '托盘号', '批次', '物料名称', '类型', '状态', '入库时间', '码垛时间'],
            searches: searchOptions,
            isIndeterminate: true,
            items: [],
            jobTimes: [],
            inTypes: [],
            dialogTableVisible: false,
            item: {
                currentPage: 1,
                pageSize: 6,
                total: '',
                list: []
            },
            id: '',
            startTimeValue: '',
            batchs: [],
            flag: false,
            areaStartTimeValue: '',
            areaEndTimeValue: '',
            searchBatch: '',
            showList: false,
            batchList: [],
        },
        methods: {
            // 函数防抖
            _debounce(wait){
                clearTimeout(this.timer);
                this.timer = setTimeout(() => {
                    this.getSelectData(this.searchBatch.trim());
                }, wait)
            },
            //已选批次
            chooseBatch(val){
                this.searchBatch = val;
            },
            //重置输入批次
            searchBatchReset(){
                this.searchBatch = '';
            },
            //验证输入批次
            searchBatchYZ(){
                if(this.searchBatch.trim() != ''){
                    var arr = [];
                    for(var i = 0; i < this.batchs.length; i++){
                        arr.push(this.batchs[i].batchName);
                    }
                    var index = $.inArray(this.searchBatch.trim(), arr);
                    if(index < 0){
                        $.modal.alertError("不存在该批次");
                        this.searchBatchReset();
                    }
                }
            },
            //批次输入框聚焦
            focusFn(){
                if(document.getElementsByClassName('inputInfo')[0] == document.activeElement){
                    this._debounce(500);
                }
                this.showList = true;
            },
            //根据批次输入框内容匹配批次列表
            getSelectData(val){
                this.batchList = [];
                for(var i = 0; i < this.batchs.length; i++){
                    if(this.batchs[i].batchName.indexOf(val) != -1){
                        this.batchList.push(this.batchs[i]);
                    }
                }
            },
            compare: function(){
                if(this.areaStartTimeValue != '' && this.areaEndTimeValue != ''){
                    if(this.areaStartTimeValue != null && this.areaEndTimeValue != null){
                        var a = new Date(this.areaStartTimeValue);
                        var b = new Date(this.areaEndTimeValue);
                        if(a > b){
                            $.modal.alertWarning("结束时间需大于开始时间");
                            this.flag = true;
                        }else{
                            this.flag = false;
                        }
                    }else if(this.areaStartTimeValue == null){
                        this.areaStartTimeValue = '';
                        this.flag = false;
                    }else if(this.areaEndTimeValue == null){
                        this.areaEndTimeValue = '';
                        this.flag = false;
                    }
                }
            },
            //获取批次列表
            getBatchs: function(){
                var that = this;
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: "/boxItembacth/findList",
                    data: {},
                    async: false,
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        that.batchs = data.rows;
                    }
                });
            },
            //获取物料列表
            getItems: function(){
                var that = this;
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: "/system/itemInfo/findList",
                    data: {},
                    async: false,
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        that.items = data.rows;
                    }
                });
            },
            //获取班次列表
            getJobTimes: function(){
                var that = this;
                $.ajax({
                    cache: true,
                    url: '/planset/findList',
                    type: 'POST',
                    data: {},
                    async: false,
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        let rows = data.rows;
                        for(var row of rows){
                            if(row["totalTime"] != "0"){
                                that.jobTimes.push(row);
                            }
                        }
                    }
                })
            },
            //获取入库类型列表
            getInTypes: function(){
                var that = this;
                $.ajax({
                    cache: true,
                    url: '/system/dict/data/list',
                    type: 'POST',
                    data: {
                        dictType: 'put_goods_type'
                    },
                    async: false,
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        that.inTypes = data.rows;
                    }
                })
            },
            moreSearch(){
                this.showMore = true;
            },
            handleCheckAllChange(val){
                this.checkedSearch = val ? searchOptions : [];
                this.isIndeterminate = false;
            },
            handleCheckedSearchChange(value){
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.searches.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.searches.length;
            },
            chengCurrentPage: function(currentPage){
                this.item.currentPage = currentPage;
                this.getMsg(this.id);
            },
            getMsg: function(id){
                var that = this;
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: "/taskFollow/findTaskHistoryDeviceName",
                    data: {
                        taskId: id,
                        pageSize: that.item.pageSize,
                        pageNum: that.item.currentPage
                    },
                    async: false,
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        var msg = data.rows;
                        for(var i = 0; i < msg.length; i++){
                            msg[i].createTime = that.timestampToTime(msg[i].createTime);
                        }
                        that.item.list = msg;
                        that.item.total = data.total;
                    }
                });
            },
            //时间戳转换格式
            timestampToTime(timestamp){
                var date = new Date(timestamp);
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                var D = date.getDate() + ' ';
                var h = date.getHours() + ':';
                var m = date.getMinutes() + ':';
                var s = date.getSeconds();
                return Y + M + D + h + m + s;
            },
            //今天日期
            today(){
                var date = new Date();
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
                return Y + M + D;
            }
        },
        created(){
            this.getBatchs();
            this.getItems();
            this.getInTypes();
            this.getJobTimes();
            this.startTimeValue = this.today();
        },
        watch: {
            'searchBatch': {
                handler: function(){
                    this.focusFn();
                }
            }
        },
        mounted(){
            let that = this;
            document.addEventListener('click', function(e){
                if(e.target.className != 'inputInfo'){
                    that.$nextTick(() => {
                        that.showList = false;
                    })
                }
            })
            document.getElementById('ul_').onmousedown = function(e){
                if(e && e.preventDefault){
                    e.preventDefault();
                }else{
                    window.event.returnValue = false;
                }
                return false;
            };
        }
    })

    $(function() {
        var options = {
            url: prefix + "/billInFindList",
            modalName: "入库任务管理",
            queryParams: queryParams,
            columns: [
                {
                    field: 'id',
                    title: 'ID',
                    align: 'center',
                    visible: false
                },
                {
                    field: 'taskNumber',
                    title: '任务编号',
                    align: 'center'
                },
                {
                    field: 'billNo',
                    title: '单据号',
                    align: 'center',
                },
                {
                    field: 'boxCode',
                    title: '托盘号',
                    align: 'center',
                },
                {
                    field: 'batch',
                    title: '批次',
                    align: 'center',
                },
                {
                    field: 'currentDevice',
                    title: '设备信息',
                    align: 'center',
                    formatter: function(value, row, index){
                        if(value != null){
                            var actions = [];
                            actions.push("<span onclick='seeMore(\"" + row.id + "\")' style='display: inline-block;cursor: pointer;padding: 0 5px;height: 22px;line-height: 22px;color: #FFFFFF;background-color: #1ab394;border-radius: 3px'>"+value+"</span>");
                            return actions.join('');
                        }
                    }
                },
                {
                    field: 'cellCode',
                    title: '货位编码',
                    align: 'center',
                    visible: false
                },
                {
                    field: 'memo',
                    title: '货位描述',
                    align: 'center',
                },
                {
                    field: 'itemCode',
                    title: '物料编码',
                    align: 'center',
                    visible: false
                },
                {
                    field: 'itemName',
                    title: '物料名称',
                    align: 'center',
                },
                {
                    field: 'quantity',
                    title: '数量',
                    align: 'center',
                },
                {
                    field: 'typeName',
                    title: '类型',
                    align: 'center'
                },
                {
                    field: 'state',
                    title: '状态',
                    align: 'center',
                    formatter: function(value, row, index){
                        var actions = [];
                        if(value == 0){
                            actions.push("<span style='display: inline-block;padding: 0 5px;line-height: 22px;color: #FFFFFF;background-color: #1ab394;border-radius: 3px'>已下发</span>");
                        }else if(value == 1){
                            actions.push("<span style='display: inline-block;padding: 0 5px;line-height: 22px;color: #FFFFFF;background-color: #1ab394;border-radius: 3px'>执行中</span>");
                        }else if(value == 2){
                            actions.push("<span style='display: inline-block;padding: 0 5px;line-height: 22px;color: #FFFFFF;background-color: #1ab394;border-radius: 3px'>报错</span>");
                        }else if(value == 3){
                            actions.push("<span style='display: inline-block;padding: 0 5px;line-height: 22px;color: #FFFFFF;background-color: #1ab394;border-radius: 3px'>已完成</span>");
                        }else if(value == 4){
                            actions.push("<span style='display: inline-block;padding: 0 5px;line-height: 22px;color: #FFFFFF;background-color: #1ab394;border-radius: 3px'>取货货物不存在</span>");
                        }else if(value == 5){
                            actions.push("<span style='display: inline-block;padding: 0 5px;line-height: 22px;color: #FFFFFF;background-color: #ed5565;border-radius: 3px'>作废</span>");
                        }else if(value == 6){
                            actions.push("<span style='display: inline-block;padding: 0 5px;line-height: 22px;color: #FFFFFF;background-color: #f8ac59;border-radius: 3px'>强制完成</span>");
                        }else if(value == 7){
                            actions.push("<span style='display: inline-block;padding: 0 5px;line-height: 22px;color: #FFFFFF;background-color: #f8ac59;border-radius: 3px'>需盘点</span>");
                        }else if(value == 8){
                            actions.push("<span style='display: inline-block;padding: 0 5px;line-height: 22px;color: #FFFFFF;background-color: #f8ac59;border-radius: 3px'>在途</span>");
                        }
                        return actions.join('');
                    }
                },
                {
                    field: 'createUserName',
                    title: '操作人员',
                    align: 'center'
                },
                {
                    field: 'planName',
                    title: '班次',
                    align: 'center',
                    visible: true
                },
                {
                    field: 'taskStartTime',
                    title: '入库开始时间',
                    align: 'center',
                    formatter: function(value, row, index){
                        return value.slice(0, 19)
                    }
                },
                {
                    field: 'taskEndTime',
                    title: '入库结束时间',
                    align: 'center',
                    formatter: function(value, row, index){
                        if(value == null){
                            return '-'
                        }else{
                            return value.slice(0, 19)
                        }
                    }
                },
                {
                    field: 'stowCreateTime',
                    title: '码垛时间',
                    align: 'center',
                    formatter: function(value, row, index){
                        if(value == null){
                            return '-'
                        }else{
                            return value.slice(0, 19)
                        }
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index){
                        var actions = [];
                        if(row.state == 0){
                            actions.push('<a class="btn btn-danger btn-xs" href="#" onclick="forceAbolish(\'' + row.id + '\')"><i class="fa fa-remove"></i>作废</a>');
                        }else if(row.state == 1 || row.state == 2){
                            actions.push('<a class="btn btn-warning btn-xs" href="#" onclick="forceComplete(\'' + row.id + '\')"><i class="fa fa-edit"></i>强制完成</a> ');
                        }else if(row.state == 1 || row.state == 2 || row.state == 7){
                            actions.push('<a class="btn btn-primary btn-xs" href="#" onclick="allocation(\'' + row.id + '\')"><i class="fa fa-edit"></i>重新分配货位</a> ');
                        }
                        return actions.join('');
                    }
                }
            ]
        };
        $.table.init(options);
    });

    function queryParams(params){
        return {
            pageSize: params.limit,
            pageNum: params.offset / params.limit + 1,
            orderByColumn: params.sort,
            isAsc: params.order,
            startTime: app.startTimeValue
        };
    }

    function forceComplete(id){
        layer.alert("确定进行此操作吗？", {
            title: "系统提示",
            btn: ['确定','取消'],
            yes: function(index, layero){
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: '/in/billlIntaskInfo/billInForceComplete',
                    data: {
                        id: id
                    },
                    async: false,
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        layer.close(index);
                        if(data.code == web_status.SUCCESS){
                            layer.alert(data.msg, {
                                title: "系统提示",
                                icon: 6,
                                end: function(){
                                    $.table.refresh();
                                }
                            });
                        }else if(data.code == web_status.WARNING){
                            $.modal.alertWarning(data.msg)
                        }else{
                            $.modal.alertError(data.msg);
                        }
                    }
                })
            }
        });
    }

    function forceAbolish(id){
        layer.alert("确定进行此操作吗？", {
            title: "系统提示",
            btn: ['确定','取消'],
            yes: function(index, layero){
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: '/in/billlIntaskInfo/billInTaskInvalid',
                    data: {
                        id: id
                    },
                    async: false,
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        layer.close(index);
                        if(data.code == web_status.SUCCESS){
                            layer.alert(data.msg, {
                                title: "系统提示",
                                icon: 6,
                                end: function(){
                                    $.table.refresh();
                                }
                            });
                        }else if(data.code == web_status.WARNING){
                            $.modal.alertWarning(data.msg)
                        }else{
                            $.modal.alertError(data.msg);
                        }
                    }
                })
            }
        });
    }

    function allocation(id){
        layer.alert("确定进行此操作吗？", {
            title: "系统提示",
            btn: ['确定','取消'],
            yes: function(index, layero){
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: '/in/billlIntaskInfo/resetTaskInCellInfo',
                    data: {
                        id: id
                    },
                    async: false,
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        layer.close(index);
                        if(data.code == web_status.SUCCESS){
                            layer.alert(data.msg, {
                                title: "系统提示",
                                icon: 6,
                                end: function(){
                                    $.table.refresh();
                                }
                            });
                        }else if(data.code == web_status.WARNING){
                            $.modal.alertWarning(data.msg)
                        }else{
                            $.modal.alertError(data.msg);
                        }
                    }
                })
            }
        });
    }

    function seeMore(value){
        app.dialogTableVisible = true;
        app.id = value;
        app.getMsg(value);
    }
</script>
</body>
</html>
